<!-- 视频上传开始 -->
<div>
	<button type="button" class="layui-btn   layui-btn-sm" onclick="uploadVideo{$id}()"><i class="layui-icon"></i>上传视频</button>
</div>
<div class="layui-form" id="uploadVideo{$id}" style="display:none;margin-top: 15px!important;font-size:12px;">
	  <div class="layui-form-item">
		    <label class="layui-form-label">本地视频</label>
		    <div class="layui-upload"  style="width:575px;height: 310px;">
				  <button type="button" class="layui-btn"  id="video{$id}"><i class="layui-icon"></i>视频上传</button>
				  <blockquote class="layui-elem-quote layui-quote-nm">
				     预览：<div class="layui-upload-list video"  style="display:none">
				         <video src = "" id="videoShow" height="140" width = "140" controls="controls"></video>
				     </div>
				  </blockquote>
				  <div>视频大小不超过1G，支持mp4，mov，m4v，flv,x-flv，mkv，wmv，avi，rmvb，3gp格式</div>
			</div>
	  </div>
	  
	  <div class="layui-form-item">
		    <label class="layui-form-label">名称</label>
		    <div class="layui-input-inline">
		       <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="最长不超过20个字" class="layui-input">
		    </div>
	  </div>
	  
	  <div class="layui-form-item">
		    <label class="layui-form-label">分组</label>
		    <div class="layui-input-inline">
		      <select name="interest" lay-verify="required" style="width:575px;">
		        <option value="0" selected="">选择视频分组</option>
		        <option value="1">阅读</option>
		        <option value="2">写作</option>
		      </select>
		    </div>
     </div>
	 
	 <div class="layui-form-item">
	    <label class="layui-form-label">封面</label>
	    <div class="layui-input-block"></div>
     </div>
	<div class="nc-form-row">
		<button type="button" class="layui-btn" id="btnVideo{$id}">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>
</div>
<!-- 视频上传结束 -->
<script>
//视频
function uploadVideo{$id}(){
	layer.open({
		type: 1,
		area: ['850px'], //宽高
		content: $('#uploadVideo{$id}'),
		cancel: function () {
			//右上角关闭回调
			$("#uploadVideo{$id}").hide();
			//return false 开启该代码可禁止点击该按钮关闭
		}
	});
}
	
var entity = {};// 传输数据的实体变量
layui.use('upload', function(){
	  var upload = layui.upload;
	//视频
	  upload.render({
		  elem: '#video{$id}'
		  , url: '{:addon_url("File://common/File/video")}'
		  , accept: 'video' //视频
		  , data: {
			  category_id: function () {
				  return $(".active>.category-id").val();
			  }
		  }
		  , auto: false
		  , multiple: true
		  , bindAction: '#btnVideo{$id}'
		  , choose: function (obj) {
			  //预读本地文件示例，不支持ie8
			  obj.preview(function (index, file, result) {
				  if (file.size > 0) {
					  layer.msg("正在上传...");
				  }
				  var url = URL.createObjectURL(file);
				  if (url != null) {
					  $('.video').css("display", "block");
				  }
				  $('#videoShow').attr("src", url);
				
				  var a = document.getElementById("videoShow");
				  var timesRun = 0;
				  var timer = setInterval(function () {
					  timesRun += 1;
					  if (timesRun === 1) {
						  clearInterval(timer);// 关闭定时器
					  }
					  entity.contentLen = parseInt(a.duration);// 获取视频时长，如果不使用定时器，获取时长可能是NAN，所以必须定时器
					  //	console.log(parseInt(a.duration));
					
					  // 视频缩略图-先获取video对象-用canvas画图，返回imageSrc，返回的是base64编码-然后解码，生成二进制blob文件，提交二进制文件到后台。如果这里不使用定时器，也获取不到图片。
					  var video = document.getElementById('videoShow');
					  var canvas = document.createElement('canvas');
					  var ctx = canvas.getContext('2d');
					  var imgHeight = video.videoHeight;
					  var imgWidth = video.videoWidth;
					  ctx.drawImage(video, 0, 0, imgWidth, imgHeight);
					  var imgSrc = canvas.toDataURL('image/png');
					  var binary = atob(imgSrc.split(',')[1]);
					  var array = [];
					  for (var i = 0; i < binary.length; i += 1) {
						  array.push(binary.charCodeAt(i));
					  }
					  var blob = new Blob([new Uint8Array(array)], {type: 'image/png'});
					  var u = URL.createObjectURL(blob);
					  var formData = new FormData();
					  formData.append('file', blob);
					  /* 	$.ajax({
		                        url: '{:addon_url("File://sitehome/File/ajaxUploadImage")}',
		                        crossDomain: true,
		                        data: formData,
		                        dataType: 'json',
		                        type: 'POST',
		                        contentType: false,
		                        processData: false,
	                            success : function(data){
			                        if (data != null){
			                            console.log(data);
			                        //entity.covers = JSON.stringify(data[0]);// 返回covers的JSON字符串
	                                }
                                }
                            }); */
				  }, 1000);
				
			  });
		  }
		  , done: function (res) {
			  layer.msg("success");
			  location.reload();
		  }
		
	  });

});
</script>